<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	*{
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;

	}
	body{
		width: 100%;
		height: 100%;
	

	}

.home{
	
	width: 92vw;
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	
}
	body{
		background: pink;

	}
	img{
		border-radius: 5px;
		box-shadow: 2px 2px 2px #ccc;
		position: absolute;
		width: 250px;
		height: auto;
	}
</style>
<body>
	
	<div class="home">
		
	</div>

	<script>

window.onload=function(){
	
	getheight()

}


		var nodes=[];//图片节点
		var nh=[];//一行的高度数组集合
		var minindex;//最小的编号
		var imglist=['1.png','14.jpg','3.jpg','4.jpg','5.png','6.jpg','7.jpg','8.jpg','9.png','10.jpg','11.png','12.png','13.png','1.png','14.jpg','3.jpg','4.jpg','5.png','6.jpg','7.jpg','8.jpg','9.png','10.jpg','11.png','12.png','13.png','1.png','14.jpg','3.jpg','4.jpg','5.png','6.jpg','7.jpg','8.jpg','9.png','10.jpg','11.png','12.png','13.png','1.png','14.jpg','3.jpg','4.jpg','5.png','6.jpg','7.jpg','8.jpg','9.png','10.jpg','11.png','12.png','13.png'];
		var wnum=Math.floor(document.documentElement.clientWidth/250);//每行的个数
		var minh;
		var imglength=imglist.length;

		console.log();
		
			createnode();



	function createnode(){//创建图片节点
		for (var i = 0; i < imglist.length; i++) {
			nodes[i]=document.createElement('img');
			nodes[i].src=imglist[i]
			nodes[i].style.display="none"
		
			document.querySelector('.home').appendChild(nodes[i])
			
		}
	}
	function getheight(){//获取第一行的高度数组nh
		for (var i = 0; i < nodes.length; i++) {
			nodes[i].style.display="block"
			if (i<wnum) {
				nodes[i].style.left=270*i+"px";
				nh.push(nodes[i].offsetHeight)
				
				minh=Math.min.apply(null,nh);
				minindex=nh.findIndex(function(v){
					return v===minh;
				})
				
			}
			else{
					//console.log(minindex)
				nodes[i].style.top=minh+10+"px";
				nodes[i].style.left=nodes[minindex].style.left;
				nh[minindex]=nh[minindex]+parseInt(nodes[i].offsetHeight)+10;
				minh=Math.min.apply(null,nh);
				minindex=nh.findIndex(function(v){
					return v===minh;
				})
				//console.log(nh[minindex])
			

			}
		}
	}



		



	




	

	</script>
	
</body>
</html>